<template>
	<div class="error-dialog-container">
		<el-dialog
			title="提示"
			:visible.sync="dialogState"
			width="450px"
			:append-to-body="false"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			@close="onVisibleChange(false)"
		>
			<div style="padding: 10px;" class="flex-start-center">
				<i id="icon-bar" class="el-icon-error" :style="{color: (status === 500? '#ed4014' : '#ed4014')}"></i>
				<span class="response-msg">{{ messageStr }}</span>
			</div>
			<div slot="footer" class="flex-end-center">
				<div v-show="showCloseButton">
					<el-button v-focus type="danger" size="small" @click="onVisibleChange(false)" @keyup.enter="onVisibleChange(false)">关 闭</el-button>
				</div>
				<el-button v-show="showConfirmButton" size="small" :loading="confirmBtnLoading" type="primary" @click="handleConfirm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
    import { removeToken } from '../../../utils/auth';
    export default {
        name: 'ErrorTipsDialog',
        data() {
            return {
                confirmBtnLoading: false,
                dialogState: false,
                messageStr: '',
                showCloseButton: false,
                showConfirmButton: false,
                status: null
            };
        },
        directives: {
            focus(el) {
                el.focus();
            }
        },
        watch: {
            '$store.state.app.errorTipsResponse': {
                handler(newVal) {
                    this.dialogState = newVal.state;
                    this.messageStr = newVal.message;
                    this.status = newVal.status;
                    if (newVal.status === 415) { // 已存在或被引用
                        this.showConfirmButton = false;
                        this.showCloseButton = true;
                    } else if (newVal.status === 500) { // 服务端报错
                        this.showConfirmButton = false;
                        this.showCloseButton = true;
                    } else if (newVal.status === 401) { // 登录失效
                        this.showCloseButton = false;
                        this.messageStr = `${newVal.message}, 前往登录?`;
                        this.showConfirmButton = true;
                    } else if (newVal.status === 510) { // 用户停用
                        this.showCloseButton = false;
                        this.messageStr = `${newVal.message}`;
                        this.showConfirmButton = true;
                    } else {
                        this.showCloseButton = true;
                    }
                },
                deep: true
            }
        },
        methods: {
            handleConfirm() {
                this.dialogState = false;
                removeToken();
                this.$store.state.user.isLoadModule = false;
                this.$router.push('login');
                this.$store.dispatch('tagsView/delAllViews');
            },
            onVisibleChange(e) {
                this.dialogState = e;
                if (!e) {
                    this.messageStr = '';
                    this.$store.state.app.isInvalid = false;
                }
            }
        }
    };
</script>
<style scoped>
.error-dialog-container >>> .el-dialog {
    min-width: 400px !important;
}
.response-msg {
    margin-left: 20px;
    /*color: red;*/
}

#icon-bar {
    font-size: 36px;
    vertical-align:middle;
    color: red;
}
</style>
